<template>
  <div class="all">
    <el-button type="primary" @click='show=true'>添加靓号</el-button>
      <el-button type="danger" @click="delNumber()">批量删除</el-button>
      <span>销售情况:
       <el-select v-model="condition.sold" placeholder="请选择" size="small">
          <el-option :value="null" label="不限"></el-option>
          <el-option :value="0" label="未售出"></el-option>
          <el-option :value="1" label="已售出"></el-option>
        </el-select>
     </span>
<span>
  <el-button type="primary" size="small" @click="search">搜索</el-button>
</span>

<div style="margin-top: 15px;">
  <el-table :data="list" @selection-change="selection">
    <el-table-column type="selection"></el-table-column>
    <el-table-column align="center" prop="name" label="靓号"></el-table-column>
    <el-table-column align="center" label="位数">
      <template slot-scope="scope">
        {{scope.row.length}}位
      </template>
    </el-table-column>
    <el-table-column align="center" prop="price" label="价格(幸运币)"></el-table-column>
    <el-table-column align="center" label="销售情况">
      <template slot-scope="scope">
        <i v-if="scope.row.sold==0" style="color: #42B983;">未销售</i>
        <i v-else style="color: red;">已销售</i>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="addTime" label="添加时间"></el-table-column>
    <el-table-column align="center" prop="remark" label="备注"></el-table-column>
    <el-table-column align="center" label="操作">
      <template slot-scope="scope">
        <el-button type="primary" size="mini" @click="Viewdetails(scope.row)">查看购买纪录</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="Page">
        <el-pagination
          background
          hide-on-single-page
          @current-change="handleCurrentChange"
          :current-page="condition.pageIndex"
          :page-size="condition.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="condition.quantity">
        </el-pagination>

  </div>
</div>
<!-- 赠送&&修改 -->
<el-dialog width="30%" title="批量添加靓号" :visible.sync="show">
	<el-button type="info" size="small" @click="addNewshow">添加行</el-button>
	<el-button type="danger" size="small" @click="delNewshow">删除行</el-button>
	<el-table :data="AddNumber" max-height="200" ref="editTable">
	  <el-table-column align="center"label="靓号">
	    <template slot-scope="scope">
	      <el-input v-model="scope.row.name"></el-input>
	    </template>
	  </el-table-column>
	  <el-table-column align="center" label="价格(幸运币)">
	    <template slot-scope="scope">
	      <el-input v-model="scope.row.price"></el-input>
	    </template>
	  </el-table-column>
	  <el-table-column align="center" label="说明">
	    <template slot-scope="scope">
	      <el-input v-model="scope.row.remark"></el-input>
	    </template>
	  </el-table-column>
	</el-table>
	<div style="text-align: center; margin: 5px 0;">
	  <el-button type="primary" size="small" @click="confirm">添加靓号</el-button>
	   <el-button size="small" @click="show=false">取消</el-button>
	</div>
</el-dialog>
    <el-dialog width="35%" title="靓号购买记录" :visible.sync="msg" center>
      <el-table :data="detailsList">
        <el-table-column align="center" prop="nickName" label="用户昵称"></el-table-column>
        <el-table-column align="center" prop="telephone" label="手机号"></el-table-column>
        <el-table-column align="center" prop="regTime" label="购买时间"></el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :total="Detacond.quantity"
        :current-page="Detacond.pageIndex"
        :page-size="Detacond.pageSize"
        hide-on-single-page
        @current-change="DetapreviousPage"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import {goodNameGetAll,goodNameAdd,goodNameDelete,getGoodsRecords} from '@/utils/API'
  export default{
     inject:["reload"],
    data(){
      return{
        //搜素条件
        condition:{
          sold:null,
          pageIndex:1,
          pageSize:20,
          quantity:21,
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        },
       list:[],
        show:false,//赠送
        AddNumber:[{name:''}],
        Detacond:{
          pageIndex:1,
          pageSize:10,
          quantity:50,
        },
        userId:'',
        msg:false,
        detailsList:[],
        delId:[]
       }
        },
        methods:{
          //搜索
          search(){
         this.postdata()
          },
          // 翻页
           handleCurrentChange(val) {
             this.condition.pageIndex=val
             this.Postdata();
          },
          //删除
          selection(val){
            this.delId=[]
            val.forEach(res=>{
              this.delId.push(res.id)
            })
          },
          delNumber(){
            if(this.delId.length>0){
              const data={
                adminName:Cookies.get('adminName'),
                token:Cookies.get('token'),
                deleteIdList:this.delId
              }
              goodNameDelete(data).then(res=>{
                if(res.code==0){
                  this.$message.success('操作成功')
                  this.reload()
                }
              })
            }else{
             this.$message.error('请选择')
            }

          },
          DetapreviousPage(val){
            this.Detacond.pageIndex=val
            getGoodsRecords(e.id,this.condition.adminName,condition.token,this.page,this.Detacond).then(res=>{
              if(res.code==0){
                this.detailsList=res.data.list
              }
            })
          },
          Viewdetails(e){
            getGoodsRecords(e.id,this.condition.adminName,this.condition.token,this.Detacond).then(res=>{
              if(res.code==0){
                this.detailsList=res.data.list
                this.Detacond.quantity=res.data.total
                this.msg=true
              }
            })
          },
          //添加行
          addNewshow(){
            if(this.AddNumber.length<100){
              this.AddNumber.push({name:''})
            }else{
                this.$message.error('到达添加上限')
            }
            this.$nextTick(() => {
              this.$refs.editTable.bodyWrapper.scrollTop = this.$refs.editTable.bodyWrapper.scrollHeight;
            })
          },
          delNewshow(){
            if(this.AddNumber.length>1){
              this.AddNumber.splice(this.AddNumber.length-1,1);
            }else{
             this.show=false
            }
          },
          //取消
          cancel(){
            this.show=false
            this.add=[]
          },
          //添加
          confirm(){
            const data={
              adminName:Cookies.get('adminName'),
              token:Cookies.get('token'),
              goodNameInfos:this.AddNumber
            }
            goodNameAdd(data).then(res=>{
              if(res.code==0){
                this.$message.success('添加成功')
                this.reload()
              }
            })
          },
          //请求
          postdata(){
            goodNameGetAll(this.condition).then(res=>{
              this.list=res.data.list
              this.condition.quantity=res.data.total
            })
          }

        },
        mounted() {
         this.postdata()
        }


        }
</script>

<style lang="scss" scoped>
  .all{
    padding: 5px 5px;
  }
  .Page{
    margin: auto;
    width: 50%;
  }
  .Nall-right{
    margin-left: 10px;
    display: inline-flex;
  }
  li{
    height: 1.875rem;
    line-height: 1.875rem;
  }

span{
  margin-left: 5px;
}
.Nall-number{
  color: #FF6600;
}
th{
      height: 30px;
      background: #eef3f7;
      border-bottom: 1px solid #d5dfe8;
      font-weight: normal;
}
tr{
  text-align: center;
}
td{
  border-bottom:1px solid #eee ;
  height: 35px;
  line-height: 35px;
}
</style>
